<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  registTeamInfoGEtByUid,
  registTeamMembersByUid,
  getDictByParentCode,
  registTeamInfoGEtByUidOut,
  registTeamMembersByUidOut,
  getDictByParentCodeOut,
} from "@/services/newsApi.ts";
import { FormInstance } from "@arco-design/web-vue";
import { maskPhone } from "@/utils";

const props = defineProps({
  registUid: String,
  show: Number,
  link: String,
});
const teamInfo = reactive({
  id: "",
  teamName: "",
  registUid: "",
});

const teamForm = reactive<{
  teamList: [];
}>({
  teamList: [],
});

const getDeclarationList = () => {
  if (props.link === "out") {
    registTeamInfoGEtByUidOut({ registUid: props.registUid }).then((res) => {
      if (res.code === 200) {
        if (res.data) {
          teamInfo.teamName = res.data?.teamName;
          teamInfo.id = res.data?.id;
          teamInfo.registUid = res.data?.registUid;
        }
      }
    });

    registTeamMembersByUidOut({ registUid: props.registUid }).then((res) => {
      if (res.code === 200) {
        teamForm.teamList = res.data;
      }
    });

    getDictByParentCodeOut({
      dictCode: "证件类型",
    }).then((res) => {
      if (res.code === 200) {
        optionsList.papers = res.data[0].children;
      }
    });
  } else {
    registTeamInfoGEtByUid({ registUid: props.registUid }).then((res) => {
      if (res.code === 200) {
        if (res.data) {
          teamInfo.teamName = res.data?.teamName;
          teamInfo.id = res.data?.id;
          teamInfo.registUid = res.data?.registUid;
        }
      }
    });

    registTeamMembersByUid({ registUid: props.registUid }).then((res) => {
      if (res.code === 200) {
        teamForm.teamList = res.data;
      }
    });

    getDictByParentCode({
      dictCode: "证件类型",
    }).then((res) => {
      if (res.code === 200) {
        optionsList.papers = res.data[0].children;
      }
    });
  }

  setTimeout(() => {
    loading.value = false;
  }, 300);
};

const formRef = ref<FormInstance>();

const loading = ref(false);

const options = reactive({
  title: "",
  type: 0,
});
const show = () => {
  loading.value = true;
  getDeclarationList();
  options.type = 0;
  formRef.value?.clearValidate();
};

const optionsList = reactive<{
  papers: [];
}>({
  papers: [],
});

// 回显
const getItem = (id: string) => {
  const find = optionsList.papers.find((item) => item.id === id);
  if (find) {
    return find.itemValue;
  }
  return "";
};

defineExpose({
  show,
});
</script>

<template>
  <a-empty v-if="teamForm.teamList.length === 0" />
  <div v-else>
    <div
      v-if="loading"
      style="height: 700px;"
    >
      <div class="loading-overlay">
        <div class="loading-spinner"></div>
        <!-- <div class="loading-text">加载中...</div> -->
      </div>
    </div>

    <div v-else>
      <a-descriptions
        bordered
        :column="1"
        :labelStyle="{ width: '180px', textAlign: 'center' }"
      >
        <a-descriptions-item label="团队名称">
          <span>{{ teamInfo.teamName }}</span>
        </a-descriptions-item>
      </a-descriptions>

      <div style="height:680px;overflow: auto;">
        <a-descriptions
          v-for="(item,index) in teamForm.teamList"
          :key="index"
          title=""
          bordered
          :column="2"
          style="margin: 20px 0px;"
          :labelStyle="{ width: '180px', textAlign: 'center' }"
          :valueStyle="{ width: '500px' }"
        >
          <a-descriptions-item>
            <template #label>
              <span class="required-label">证件类型</span>
            </template>
            <span>{{ getItem(item.idType) }}</span>
          </a-descriptions-item>

          <a-descriptions-item>
            <template #label>
              <span class="required-label">证件号码</span>
            </template>
            <span>{{item.idNumber}}</span>
          </a-descriptions-item>

          <a-descriptions-item>
            <template #label>
              <span class="required-label">单位名称</span>
            </template>
            <span>{{ item.unitName }}</span>
          </a-descriptions-item>

          <a-descriptions-item>
            <template #label>
              <span class="required-label">职务/职称</span>
            </template>
            <span>{{ item.positionTitle }}</span>
          </a-descriptions-item>

          <a-descriptions-item>
            <template #label>
              <span class="required-label">姓名</span>
            </template>
            <span>{{ item.memberName }}</span>
          </a-descriptions-item>

          <a-descriptions-item>
            <template #label>
              <span class="required-label">手机</span>
            </template>
            <span>{{ maskPhone(item.phone) }}</span>
          </a-descriptions-item>

          <a-descriptions-item>
            <template #label>
              <span class="required-label">项目中主要承担的角色</span>
            </template>
            <span>{{ item.projectRole}}</span>
          </a-descriptions-item>

          <a-descriptions-item>
            <template #label>
              <span class="required-label">是否团队联络人</span>
            </template>
            <span>{{ item.isContactPerson ? '是' : '否' }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  font-size: 13px;
  color: #333;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
sup {
  color: #f5222d;
}
</style>
